import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container-scroll'))
const Tabs 		= $Lazy.load(()=>import('#tp/tabs/my-tabs'))
const message 	= $Lazy.file(()=>import('@antd/message'))
// ===================================================================== data
const  kindStatus = [
	{ name:'开启', 		value:'2' },
	{ name:'审核中', 	value:'1' },
	{ name:'草稿', 		value:'0' },
]
const tabsData = [
	{ title:'基本信息', 			status:0 },
	{ title:'报告单特性', 		status:1 },
	{ title:'检测系统', 			status:2 },
	{ title:'检测结果特性', 		status:3 },
	{ title:'分发与检测特性', 	status:4 },
	{ title:'项目信息', 			status:5 },
	{ title:'收集与采集特性', 	status:6 },
]
const saveName = 'single-project-index'
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label: '状态',		name: 'kind_status', type:'select', data: kindStatus },
			{ label: '项目代码',  	name: 'kind_code'},
		],
		index: $fn.local(saveName) || 0,
		pages: [
			{ component:$Lazy.state(()=>import('./pages/a')) },
			{ component:$Lazy.state(()=>import('./pages/b')) },
			{ component:$Lazy.state(()=>import('./pages/c')) },
			{ component:$Lazy.state(()=>import('./pages/d')) },
			{ component:$Lazy.state(()=>import('./pages/e')) },
			{ component:$Lazy.state(()=>import('./pages/f')) },
			{ component:$Lazy.state(()=>import('./pages/g')) }
		],
		info:{},
		offTips: {
			comb: [],
			market: [],
			single: [],
			sub: []
		}
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		
		this.kind_id = $fn.query('kind_id')
		
		this.query = { uuid: this.kind_id }
		
		if(index !== 0){
			this.checkFetch()
			this.fetch()
		}
		
		this.setState({ pages, disabled: index === 2 })
	}
	
	componentWillUnmount(){
		$fn.remove(saveName)
	}
	
	// 操作按钮
	controls = () => {
		const { index, disabled, edit } = this.state
		if( edit === true){
			const { comb, market, single, sub } = this.state.offTips
			return [
				Confirm.call(this, '下架', 'kind-info/off', { param:this.kind_id, idStr:'kind_id', msg:
					<div>
					<span>{ single.length || sub.length || comb.length || market.length ? <span style={{color: 'red'}}>该项目下架，以下关联项目也将会被下架！</span> : '确认下架？' }</span><br />
						{ single.length ? <div>单一项目:【{single.join(',')}】<br /></div> : '' }
						{ sub.length ? <div>从属项目:【{sub.join(',')}】<br /></div> : '' }
						{ comb.length ? <div>组合项目:【{comb.join(',')}】<br /></div> : '' }
						{ market.length ? <div>营销项目:【{market.join(',')}】<br /></div> : '' }
					</div>,
					refresh:true, onComplete:()=>{
						this.setState({ edit: false })
				} }),
				Controls.back.call(this, { refresh:true })
			]
		}else if( edit === false){
			return [
				Confirm.call(this,'保存', null, {
					disabled,
					onMy: ()=> {
						this.isAudit = false
						this['ref' + index].onSubmit()
						$fn.dataRemove('specimen-kind/selectkind')
						
					}
				}),
				Confirm.call(this, '审批', 'kind-info/audit', { query: this.query }),
				Confirm.call(this,'保存并提交审批', null, {
					disabled,
					onMy: ()=> {
						this.isAudit = true
						this['ref' + index].onSubmit()
						$fn.dataRemove('specimen-kind/selectkind')
					}
				}),
				Confirm.call(this, '发布', 'kind-info/push', { query: this.query, onComplete:()=>{$fn.dataRemove('specimen-kind/selectkind')} }),
				Controls.back.call(this, { refresh:true })
			]
		}else{
			return []
		}
	}
	// 检测 kind_id
	checkFetch = index => {
		const {  pages } = this.state
		const disabled = [2, 5, 6].includes(index)
		$http.submit(null,'kind-info/checkinfo', { param:{ kind_id: this.kind_id }, loading:false, onMsg:({ code, msg })=>{
			if(code === 400){
				message.then(f=>f.warning(msg))
				pages[0].first = true
				this.setState({ index:0, pages, disabled })
				$fn.local(saveName, 0)
			}
		} }).then(data=>{
			if($fn.isValid(index)){
				pages[+index].first = true
				this.setState({ index, pages, disabled })
				$fn.local(saveName, index)
			}
		})
	}
	// 获取数据
	fetch = callback => {
		$http.submit(null,'kind-info/info', { param:{uuid:this.kind_id}, isPull:true } ).then(data=>{
			const { kind_status } = data
			this.setState({ edit: +kind_status === 2, info:data })
			callback?.(data)
		})
		$http.submit(null, 'kind-info/offTips', { param:{kind_id:this.kind_id} }).then(data => this.setState({offTips: data}))
	}
	
	render(){
		const {  index, pages, info, edit } = this.state
		return (
			<>
				<Page
					header = {
						(
							<Tabs
								defaultActiveKey = { index }
								data			 = { tabsData }
								onTabs 			 = { async (rows, index) => {
									this.checkFetch(index)
								}}
								controls = { this.controls() }
							/> 
						)
					}
					nobc
				>
					
					{
						pages.map((v,i)=> (
							v.first && (
								<div key={i} style={{ display: index === i && v.first ? 'block' : 'none' }}>
									<v.component 
										tableStyle	= {{height:300, padding:'10px 0 10px'}} 
										kind_id		= {this.kind_id}
										onRef		= {ref=>this['ref' + i] = ref}
										onAudit		= {()=>{
											if(this.isAudit){
												$http.submit(this,'kind-info/audit', { param: this.query }).then(data=>{
													message.then(f=>f.success('审核成功'))
												})
											}
										}}
										info 		= { info }
										fetch		= { this.fetch }
										edit		= { edit }
										{...this.props}
									/>
								</div>
							)
						))
					}
				</Page>
				
			</>
		)
	}
}

export default Index